<!-- 布局主页 -->
<script lang="ts" setup>
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  NotificationOutlined,
  ExperimentOutlined,
  SettingOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import {
  ref,
  defineComponent,
  onMounted,
  computed,
  getCurrentInstance,
} from 'vue'
import { useInfoStore } from '../../stores/userInfo'
import { useRouter } from 'vue-router'

/**
 * TS 类型
 */

/**
 *pinia store
 */
const useInfo = useInfoStore()

/**
 * 钩子函数
 */
onMounted(() => {
  init()
})

/**
 * 注册组件
 */
defineComponent({
  components: {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    NotificationOutlined,
    ExperimentOutlined,
    SettingOutlined,
    AppstoreOutlined,
  },
})

/**
 * router
 */
const router = useRouter()

/**
 * data数据
 */
const collapsed = ref<boolean>(false)
const openKeys = ref<string[]>(['sub1'])
const selectedKeys = ref<string[]>(['1'])
//菜单数据
const menuList = [
  {
    key: '1',
    menuTitle: '联络人',
    menuIcon: 'icon-yuangong',
    keyPath: '/home/user',
  },
  {
    key: '2',
    menuTitle: '公司',
    menuIcon: 'icon-gongsi',
    keyPath: '/home/company',
  },
  {
    key: '3',
    menuTitle: 'TS类型标注',
    menuIcon: 'icon-zhishi',
    keyPath: '/home/tsType',
  },
  {
    key: '4',
    menuTitle: '消息列表',
    menuIcon: 'icon-xiaoxiliebiao',
    keyPath: '/home/note',
  },
  {
    key: '5',
    menuTitle: '个人资料',
    menuIcon: 'icon-gerenxinxi_o',
    keyPath: '/home/setting',
  },
  {
    key: '7',
    menuTitle: '创建ICON',
    menuIcon: 'icon-chuangjian',
    keyPath: '/home/createIcon',
  },
  {
    key: '8',
    menuTitle: 'ref操作Dom',
    menuIcon: 'icon-zhishi1',
    keyPath: '/home/refDom',
  },
  {
    key: '10',
    menuTitle: '盒子等高',
    menuIcon: 'icon-denggao',
    keyPath: '/home/sameHeight',
  },
  {
    key: '11',
    menuTitle: 'Grid布局',
    menuIcon: 'icon-baocunbuju',
    keyPath: '/home/grid',
  },
  {
    key: '6',
    menuTitle: '富文本',
    menuIcon: 'icon-fuwenben',
    keyPath: '/home/editor',
    subMenu: [
      {
        key: '6_1',
        menuTitle: 'wangEditor5',
        menuIcon: 'icon-fuwenben',
        keyPath: '/home/editor/wangEditor5',
      },
    ],
  },
  {
    key: '9',
    menuTitle: '大屏适配',
    menuIcon: 'icon-shujudaping',
    subMenu: [
      {
        key: '9_1',
        menuTitle: '适配Demo',
        menuIcon: 'icon-shujudaping',
        keyPath: '/bigScreen',
        pushType: 'resolve',
      },
      {
        key: '9_2',
        menuTitle: '和悦数据',
        menuIcon: 'icon-shujudaping',
        keyPath: '/bigDigital',
        pushType: 'resolve',
      },
    ],
  },
  {
    key: '12',
    menuTitle: 'CSS',
    menuIcon: 'icon-shujudaping',
    subMenu: [
      {
        key: '12_1',
        menuTitle: 'Animation',
        menuIcon: 'icon-shujudaping',
        keyPath: '/home/cssLearn/animation',
      },
      {
        key: '12_2',
        menuTitle: 'Background',
        menuIcon: 'icon-shujudaping',
        keyPath: '/home/cssLearn/background',
      },
      {
        key: '12_3',
        menuTitle: 'Gradients',
        menuIcon: 'icon-shujudaping',
        keyPath: '/home/cssLearn/gradients',
      },
      {
        key: '12_4',
        menuTitle: 'MultiColumn',
        menuIcon: 'icon-shujudaping',
        keyPath: '/home/cssLearn/multiColumn',
      },
    ],
  },
  // {
  //   key: '7',
  //   menuTitle: '其他',
  //   menuIcon: UploadOutlined,
  //   keyPath: '/home',
  // },
]

const fullscreenRef = ref()
const showfullscreen = ref<boolean>(false)
const instance = getCurrentInstance()

/**
 * 计算属性
 */

const unreadNoteList = computed(() => {
  let list = []
  for (let item of useInfo.noteInfo.noteList) {
    if (item.state == false) {
      list.push(item.noteMessage)
    }
  }
  return list
})

/**
 *组件内方法
 */
//全屏
function toggle() {
  showfullscreen.value = !showfullscreen.value
  instance?.proxy?.$fullscreen.toggle()
}
//点击菜单
function clickMenu(keyPath: string, pushType?: any) {
  if (pushType && pushType == 'resolve') {
    let { href } = router.resolve(keyPath)
    window.open(href, '_blank')
  } else {
    router.push(keyPath)
  }
}
//设置默认选中菜单
function getDefaultMenu() {
  let currentPath = router.currentRoute.value.path
  for (let item of menuList) {
    if (item.keyPath == currentPath) {
      selectedKeys.value = [`${item.key}`]
      break
    } else {
      selectedKeys.value = ['6_1']
    }
  }
}

//初始化判断页面
function init() {
  // if (!useInfo.userLogin()) {
  //   message.error('登录失效，请重新登录~')
  //   router.push('/login')
  //   return
  // }
  getDefaultMenu()
  useInfo.getNoteInfo()
}
//用户设置
const userSeeting = () => {
  router.push('/home/setting')
  selectedKeys.value = [`5`]
}
//退出登录
const signOut = () => {
  localStorage.removeItem('userName')
  router.push('/login')
}
//通知到消息列表
const navtoNote = () => {
  let currentPath = router.currentRoute.value.path
  if (currentPath !== '/home/note') router.push('/home/note')
}
</script>
<template>
  <a-layout style="height: 100%">
    <!-- 菜单 -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div
        class="logo"
        :style="{ background: collapsed ? '' : 'rgba(255, 255, 255, 0.3)' }"
      >
        <img v-if="collapsed" src="../../assets/img/logo.jpg" />
        <span style="line-height: 32px" v-else>Vue3+Vite+Ts</span>
      </div>
      <a-menu
        v-model="openKeys"
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <template v-for="(menuItem, index) of menuList" :key="menuItem.key">
          <template v-if="menuItem?.subMenu">
            <a-sub-menu :key="menuItem.key">
              <template #icon>
                <iconFont
                  :type="menuItem.menuIcon"
                  style="font-size: 18px"
                ></iconFont>
              </template>
              <template #title>{{ menuItem.menuTitle }}</template>
              <a-menu-item
                v-for="subMenuItem of menuItem.subMenu"
                :key="subMenuItem.key"
                @click.stop="
                  clickMenu(subMenuItem.keyPath, subMenuItem?.pushType)
                "
              >
                {{ subMenuItem.menuTitle }}</a-menu-item
              >
            </a-sub-menu>
          </template>
          <template v-else>
            <a-menu-item
              :key="menuItem.key"
              class="font-18"
              @click.stop="clickMenu(menuItem.keyPath, menuItem?.pushType)"
            >
              <iconFont
                :type="menuItem.menuIcon"
                style="font-size: 18px"
              ></iconFont>
              <!-- <component :is="menuItem.menuIcon"></component> -->
              <span>{{ menuItem.menuTitle }}</span>
            </a-menu-item>
          </template>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- 头部 -->
      <a-layout-header class="main-header" style="padding: 0 24px">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger font-18"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger font-18"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="user-box">
          <a-space :size="20">
            <div class="code-path">
              <iconFont
                type="icon-gitee-fill-round"
                style="font-size: 22px"
              ></iconFont>
              <a
                href="https://gitee.com/identity/vue3_vite_ts_app"
                target="view_window"
              >
                Gitee地址</a
              >
            </div>
            <!-- 全屏 -->
            <div class="full-screen" @click="toggle">
              <iconFont
                :type="showfullscreen ? 'icon-tuichuquanping' : 'icon-quanping'"
                style="font-size: 20px"
              ></iconFont>
            </div>

            <!-- 通知 -->
            <a-popover placement="bottomRight">
              <a-badge
                :count="useInfo.noteInfo.unreadCount"
                :overflow-count="100"
              >
                <a-avatar :size="32">
                  <template #icon><NotificationOutlined /></template>
                </a-avatar>
              </a-badge>
              <template #content>
                <p
                  v-for="(item, index) in unreadNoteList"
                  :key="index"
                  @click="navtoNote"
                >
                  消息{{ index + 1 }}：{{ item }}
                </p>
              </template>
            </a-popover>

            <!-- 头像 -->
            <a-popover placement="bottomRight">
              <div class="user-info">
                <a-avatar :size="32" :src="useInfo.avatarUrl">
                  <template #icon v-if="!useInfo.avatarUrl"
                    ><UserOutlined
                  /></template>
                </a-avatar>
                <div class="user-name">{{ useInfo.userName }}</div>
              </div>
              <template #content>
                <div class="user-setting">
                  <div class="item" @click="userSeeting">个人资料</div>
                  <!-- <div class="item">修改密码</div> -->
                  <div class="item" @click="signOut">退出登录</div>
                </div>
              </template>
            </a-popover>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
          overflowY: 'auto',
        }"
      >
        <div ref="fullscreenRef">
          <fullscreen v-model="showfullscreen">
            <router-view></router-view>
          </fullscreen>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style lang="scss" scoped>
.logo {
  height: 32px;
  margin: 16px;
  text-align: center;
  color: var(--ant-primary-color);
  font-size: 18px;
  img {
    width: 30px;
    height: 30px;
  }
}
.main-header {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .user-box {
    display: flex;
    align-items: center;
    .code-path {
      font-size: 18px;
    }
    .full-screen {
      width: 32px;
      height: 32px;
      border: 1px solid rgb(209, 202, 202);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .user-info {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .user-name {
      margin-left: 8px;
    }
  }
}
.user-setting {
  .item {
    height: 36px;
    line-height: 36px;
    &:hover {
      color: var(--ant-primary-color);
    }
  }
}
</style>
